<template>
  <div class="search-container">
    <!-- 搜索组件一级路由   $router.back()返回上一个页面-->
    <van-nav-bar
      left-arrow
      title="搜索中心"
      @click-left="$router.back()"
    />

    <!-- https://youzan.github.io/vant/#/zh-CN/search -->
    <van-search
      v-model.trim="keyword"
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      @input="getSuggestions"
    >
      <!-- template 只是一个包裹性质的容器,不会在dom结构中渲染的 -->
      <template #action>
        <div @click="clickBtn">搜索</div>
      </template>
    </van-search>

    <!-- 联想建议 -->
    <van-cell-group v-if="keyword">
      <van-cell v-for="(str,index) in handleList" :key="index" icon="search" @click="clickSuggest(index)">
        <div v-html="str" />
      </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->

    <!-- 搜索历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录" />
      <van-cell v-for="(item,index) in history" :key="item" :title="item" @click="clickHistory(item)">
        <van-icon name="close" @click.stop="delHistoty(index)" />
      </van-cell>
    </van-cell-group>
    <!-- /搜索历史记录 -->
  </div>
</template>

<script>
import { reqGetSuggestions } from '@/api/search'
import { setHistory, getHistory } from '@/utils/storage'
export default {
  name: 'Search',
  data() {
    return {
      keyword: '', // 搜索关键字
      suggestList: [], // 联想建议的数据
      history: getHistory(),
      timeId: null
    }
  },
  computed: {
    handleList() {
      const reg = new RegExp(this.keyword, 'gi')
      // 这个return是计算属性的return
      return this.suggestList.map(item => {
        // 这个return是map函数的return
        return item.replace(reg, (val) => {
          // 这个return 是replace方法return
          return `<span style="color: red;">${val}</span>`
        })
      })
    }
  },
  methods: {
    // 获取联想建议
    getSuggestions() {
      // !this.keyword 和 this.keyword === ''
      // 如果关键词是空的,禁止发送请求 并且将联想建议数组清空
      // 先清除之前的定时任务 保证只有一个定时任务
      clearTimeout(this.timeId)
      this.timeId = setTimeout(async() => {
        if (!this.keyword) {
          this.suggestList = []
          return
        }
        const { data: { data: { options }}} = await reqGetSuggestions(this.keyword)
        // 不要修改源数据,因为会影响到后面的工作-
        // const reg = new RegExp(this.keyword, 'gi')
        // const res = options.map(item => {
        //   return item.replace(reg, (val) => {
        //     return `<span style="color: red;">${val}</span>`
        //   })
        // })
        // console.log(res)
        this.suggestList = options
      }, 300) // 300不宜设置太长
    },
    // 点击搜索按钮 添加的是输入的值  keyword
    clickBtn() {
      if (!this.keyword) return
      // console.log('添加历史了' + this.keyword)
      this.addHistory(this.keyword)
    },
    // 点击了联想建议 添加的是当前这一条建议
    clickSuggest(index) {
      // console.log('添加历史了建议', this.suggestList[index])
      this.addHistory(this.suggestList[index])
    },
    // 点击历史记录
    clickHistory(item) {
      // console.log(item)
      this.addHistory(item)
    },
    // 追加历史并跳转到搜索结果页面的方法
    addHistory(str) {
      this.history.unshift(str)
      // console.log(new Set(this.history))\
      // const arr = [1,2,3,4,5,12,3,4,1,1,1]  数组去重 new Set(arr) 得到的是一个集合
      // 使用new Set处理唯一性
      this.history = [...new Set(this.history)]
      // 存储历史
      setHistory(this.history)
      console.log('跳转页面')
      // 编程式导航跳转到/searchResult
      // this.$router.push(`/searchResult?keyword=${str}`)
      this.$router.push({
        path: '/searchResult',
        query: {
          keyword: str
        }
      })
    },
    // 删除单个历史
    delHistoty(index) {
      this.history.splice(index, 1)
      // 存储历史
      setHistory(this.history)
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
